<template>
  <div class="project3">
    <cheader :pageIndex="2"></cheader>
    <div class="jdBg">
      <img src="@/common/img/bg.png" alt="" class="bg">
      <img src="./banner.png" alt="" class="title">
    </div>
    <div class="comic">
      <div class="c-titleWrap">
        <div class="c-title">
          <div class="t">
            <img src="@/common/img/ball4.png" alt="" class="img1">
            <img src="./ball.png" alt="" class="img2">
            <h2>康康战疫记</h2>
            <span class="l"></span>
            <span class="r"></span>
          </div>
        </div>
      </div>
      <ul>
        <li class="img1">
          <img src="./1.png" alt="">
          <!-- <a href="https://www.sjtu.edu.cn/" target="_blank"></a> -->
          <button class="btn link1" :data-coe='0' @click="showInfo">点击了解：思必驰智能语音机器人</button>
        </li>
        <li class="img2">
          <img src="./2.png" alt="">
          <!-- <a href="https://www.sjtu.edu.cn/" target="_blank" class="link1"></a>
          <a href="https://www.sjtu.edu.cn/" target="_blank" class="link2"></a>
          <a href="https://www.sjtu.edu.cn/" target="_blank" class="link3"></a>
          <a href="https://www.sjtu.edu.cn/" target="_blank" class="link4"></a> -->
          <button class="btn link1" :data-coe='1' @click="showInfo">点击了解：消费机器人大白</button>
          <button class="btn link2" :data-coe='2' @click="showInfo">点击了解：医疗服务机器人小白</button>
          <button class="btn link3" :data-coe='3' @click="showInfo">点击了解：核酸检测</button>
          <button class="btn link4" :data-coe='4' @click="showInfo">点击了解：“一次性防飞溅隔离巾”</button>
        </li>
        <li class="img3">
          <img src="./3.png" alt="">
          <!-- <a href="https://www.sjtu.edu.cn/" target="_blank" class="link1"></a>
          <a href="https://www.sjtu.edu.cn/" target="_blank" class="link2"></a> -->
          <button class="btn link1" :data-coe='5' @click="showInfo">点击了解：“移动式医疗垃圾焚烧方舱”</button>
          <button class="btn link2" :data-coe='6' @click="showInfo">点击了解：心理辅导</button>
        </li>
        <li class="img4">
          <img src="./4.png" alt="">
          <!-- <a href="https://www.sjtu.edu.cn/" target="_blank"></a> -->
          <button class="btn link1" :data-coe='7' @click="showInfo">点击了解：新冠肺炎科普知识</button>
        </li>
      </ul>
      <div class="btnGroup">
        <button @click="goToList(2, 1, 32)">
          <img src="./b1.png" alt="">
        </button>
        <button @click="goToList(2, 2, 33)">
          <img src="./b2.png" alt="">
        </button>
        <button @click="goToList(2, 3, 34)">
          <img src="./b3.png" alt="">
        </button>
      </div>
    </div>
    <div class="popup" @click.self="close" v-if="popupShow">
      <div class="content" v-if="dataArr.length">
        <h2>{{dataArr[dataCoe].title}}</h2>
        <font-awesome-icon icon="times" class="icon" @click="close"/>
        <div class="rich3" v-html="dataArr[dataCoe].description">
        </div>
      </div>
    </div>
    <cfooter></cfooter>
  </div>
</template>
<script>
import cheader from '@/components/cheader/cheader'
import cfooter from '@/components/cfooter/cfooter'
import api from '@/common/js/api'
export default {
  data () {
    return {
      bg: require('@/common/img/bg.png'),
      dataArr: [],
      dataCoe: 0,
      popupShow: false
    }
  },
  watch: {
    popupShow (res) {
      if (res === true) {
        document.body.classList.add('noscroll')
      } else {
        document.body.classList.remove('noscroll')
      }
    }
  },
  created () {
    api.project3Index().then(res => {
      if (res.data.result === '0') {
        this.dataArr = res.data.data.illustation
      }
    })
  },
  methods: {
    // 去专题列表页 (专题几，第几个模块, 后端参数type, 后端参数id)
    goToList (project, blc, postType, postId) {
      this.$router.push({
        name: 'projectList',
        query: {
          project: project,
          blc: blc,
          postType: postType,
          postId: postId
        }
      })
    },
    close () {
      this.popupShow = false
    },
    showInfo (e) {
      this.dataCoe = e.target.dataset.coe
      this.popupShow = true
    }
  },
  components: {
    cheader,
    cfooter
  }
}
</script>
<style lang="scss" scoped>
  $projectBlue: #57a9d5;
  .project3 {
    background: no-repeat top center $projectBlue;
    .jdBg {
      width: 100%;
      height: 270px;
      // background: green;
      position: relative;
      overflow: hidden;
      margin-bottom: 20px;
      .bg {
        width: 375px;
        height: 229px;
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -187px;
      }
      .title {
        width: 375px;
        height: 205px;
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: -187px;
      }
    }
    .c-titleWrap {
      text-align: center;
      .c-title {
        display: inline-block;
        .t {
          height: 35px;
          line-height: 35px;
          padding: 0 27px;
          position: relative;
          margin-bottom: 15px;
          .img1 {
            position: absolute;
            top: 0;
            left: 10px;
            width: 30px;
            height: 30px;
          }
          .img2 {
            position: absolute;
            bottom: 2px;
            right: 20px;
            width: 12px;
            height: 12px;
          }
          h2 {
            line-height: 20px;
            font-size: 17px;
            color: #fff;
            font-weight: bold;
            position: relative;
            top: 10px;
          }
          span {
            display: inline-block;
            width: 5px;
            height: 5px;
            background-color: #ffe75f;
            position: absolute;
            bottom: 4px;
            &.l {
              left: 0;
            }
            &.r {
              right: 0;
            }
          }
        }
        .b {
          font-size: 24px;
          color: #fff;
          text-align: center;
        }
      }
    }
    .comic {
      width: 100%;
      overflow: hidden;
      margin: 0 auto 14px;
      ul {
        li {
          display: block;
          width: 100%;
          position: relative;
          margin-bottom: 30px;
          img {
            width: 325px;
            height: 200px;
            display: block;
            margin: 0 auto 10px;
          }
          .btn {
            display: block;
            // background-color: rgba($color: #000000, $alpha: .5);
            // position: absolute;
            width: 325px;
            height: 30px;
            background-color: #8dc6e4;
            border: 0 none;
            cursor: pointer;
            margin: 0 auto 5px;
            border: 1px solid #3a6b86;
            color: #194a65;
            font-weight: 900;
            font-size: 14px;
            border-radius: 10px;
          }
          &.img1 {
            margin-bottom: 20px;
          }
          &.img2 {
            margin-bottom: 20px;
          }
          &.img3 {
            margin-bottom: 20px;
          }
          &.img4 {
            margin-bottom: 20px;
          }
        }
      }
      .btnGroup {
        // display: flex;
        // justify-content: space-between;
        button {
          // border-radius: 10px;
          background-color: transparent;
          overflow: hidden;
          width: 325px;
          height: 60px;
          border: 0 none;
          cursor: pointer;
          // box-shadow: 0 0 20px #000;
          padding: 0;
          transition: .3s all;
          display: block;
          margin: 0 auto 15px;
          &:hover {
            box-shadow: 0 0 30px #000;
          }
          img {
            width: 325px;
            height: 60px;
          }
        }
      }
    }
    .popup {
      background: rgba($color: #000000, $alpha: .7);
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 9999;
      .content {
        border-radius: 20px;
        background-color: #fff;
        width: 86%;
        height: 400px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -43%;
        margin-top: -220px;
        .icon {
          font-size: 30px;
          // background-color: red;
          padding: 10px;
          cursor: pointer;
          position: absolute;
          right: 10px;
          top: 10px;
        }
        h2 {
          color: #000;
          line-height: 25px;
          font-size: 18px;
          font-weight: bold;
          width: 90%;
          margin: 40px auto 20px;
          box-sizing: border-box;
          padding-right: 30px;
        }
        .rich3 {
          width: 90%;
          height: 265px;
          margin: 0 auto;
          line-height: 30px;
          box-sizing: border-box;
          padding-right: 20px;
          // background-color: red;
          overflow-y: auto;
          p {
            font-size: 40px !important;
          }
        }
      }
    }
  }
</style>
